<template>
  <div class="userDisPath">
    <el-form
      :model="ruleForm"
      :rules="rules"
      ref="ruleForm"
      label-width="100px"
      class="demo-ruleForm"
    >
      <el-form-item label="派单类型:" style="font-weight:bold;" prop="productId">
        <el-select v-model="ruleForm.productId" class="com-input" placeholder="请选择派单类型">
          <el-option v-for="item in types" :key="item.id" :label="item.name" :value="item.id"/>
        </el-select>
      </el-form-item>
      <h3>服务预约信息</h3>
      <el-form-item label="预约手机号:" prop="bookMobile">
        <el-input v-model="ruleForm.bookMobile"></el-input>
      </el-form-item>
      <el-form-item label="所患疾病:" prop="sickName">
        <el-select v-model="ruleForm.sickType" class="com-input" placeholder="请选择">
          <el-option label="意外" value="1"></el-option>
          <el-option label="疾病" value="2"></el-option>
          <el-option label="重疾" value="3"></el-option>
        </el-select>
        <el-input class="com-input" placeholder="请输入所患疾病" v-model="ruleForm.sickName"/>
      </el-form-item>
      <el-form-item label="所在地区:" prop="province">
        <user-address
          :defaultValue="defaultAddress"
          @countryChange="refArea"
          ref="AddAddress"
          seletStyle="width:220px"
        />
      </el-form-item>
      <el-form-item label="期望就诊地:" prop="wantProvince">
        <user-address
          @countryChange="getHospital"
          :defaultValue="defaultAddress2"
          ref="AddAddress2"
          seletStyle="width:220px"
        />
      </el-form-item>
      <el-form-item label="预约医院:" prop="hospitalId">
        <el-select
          v-model="ruleForm.hospitalId"
          @change="getHosName"
          :disabled="isCheckHos"
          class="com-input"
          filterable
          placeholder="请选择"
        >
          <el-option v-for="item in hosList" :key="item.id" :label="item.name" :value="item.id"/>
        </el-select>
        <el-button type="success" @click="creatHos">创建医院</el-button>
        <span style="margin-left:10px;font-size:12px;color:#666;" v-show="isCheckHos">请先选择期望就诊地区</span>
      </el-form-item>
      <el-form-item label="预约科室:" prop="dept1">
        <el-select
          @change="changeDep"
          v-model="ruleForm.dept1"
          class="com-input"
          placeholder="请选择一级科室"
        >
          <el-option
            v-for="item in codeTypes"
            :key="item.dKey"
            :label="item.dValue"
            :value="item.dKey"
          />
        </el-select>

        <el-select
          @change="chooseDoc"
          v-model="ruleForm.dept2"
          class="com-input"
          placeholder="请选择二级科室"
        >
          <el-option
            v-for="item in codeTypes2"
            :key="item.dKey"
            :label="item.dValue"
            :value="item.dKey"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="指定医生:" prop="doctorId">
        <el-select v-model="ruleForm.doctorId" class="com-input" placeholder="请选择">
          <el-option v-for="item in docList" :key="item.id" :label="item.name" :value="item.id"/>
        </el-select>
      </el-form-item>
      <el-form-item label="住院状态:" prop="enterHospitalState">
        <el-select
          v-model="ruleForm.enterHospitalState"
          @change="enterStage"
          class="com-input"
          placeholder="请选择"
        >
          <el-option
            v-for="item in liveHosState"
            :key="item.dKey"
            :label="item.dValue"
            :value="item.dKey"
          />
        </el-select>
      </el-form-item>
      <div class="right" v-show="liveHosMore">
        <el-form-item label="住院时间:">
          <el-date-picker v-model="ruleForm.enterHospitalTime" type="date" placeholder="选择日期"/>
        </el-form-item>
        <el-form-item label="已交费用:">
          <el-input class="com-input" placeholder="请输入已交费用" v-model="ruleForm.payMoney"/>
        </el-form-item>
        <el-form-item label="催缴费用:">
          <el-input class="com-input" placeholder="请输入催缴费用" v-model="ruleForm.needMoney"/>
        </el-form-item>
      </div>
      <el-form-item label="社保状态:" prop="sheBaoState">
        <el-select v-model="ruleForm.sheBaoState" class="com-input" placeholder="请选择">
          <el-option
            v-for="item in securityType"
            :key="item.dKey"
            :label="item.dValue"
            :value="item.dKey"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="社保所在地区:">
        <user-address :defaultValue="defaultAddress3" ref="AddAddress3" seletStyle="width:220px"/>
      </el-form-item>
      <el-form-item label="本次社保直结:">
        <el-radio-group v-model="ruleForm.sheBaoPay">
          <el-radio label="true">是</el-radio>
          <el-radio label="false">否</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="新农合盖章:">
        <el-radio-group v-model="ruleForm.nongHeSign">
          <el-radio label="true">是</el-radio>
          <el-radio label="false">否</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="用户备注:">
        <el-input type="textarea" :rows="3" placeholder="请输入内容" v-model="ruleForm.remark"/>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="submitForm('ruleForm')">提交</el-button>
        <el-button @click="cancle">取消</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
const queryString = require("querystring");
import UserAddress from "../../../../components/address";
export default {
  name: "userDisPath",
  data() {
    return {
      ruleForm: {
        productId: "",
        bookMobile: "",
        sickType: "",
        sickName: "",
        province: "",
        city: "",
        country: "",
        wantProvince: "",
        wantCity: "",
        wantCountry: "",
        sheBaoProvince: "",
        sheBaoCity: "",
        sheBaoCountry: "",
        hospitalId: "",
        dept1: "",
        dept2: "",
        doctorId: "",
        enterHospitalState: "",
        enterHospitalTime: "",
        payMoney: "",
        needMoney: "",
        sheBaoState: "",
        sheBaoPay: "",
        nongHeSign: "",
        remark: ""
      },
      rules: {
        productId: [
          { required: true, message: "请选择派单类型", trigger: "change" }
        ],
        bookMobile: [
          { required: true, message: "请输入预约手机号", trigger: "blur" }
        ],
        sickName: [
          { required: true, message: "请输入所患疾病", trigger: "blur" }
        ],
        province: [
          { required: true, message: "请选择所在地区", trigger: "change" }
        ],
        wantProvince: [
          { required: true, message: "请选择期望就诊地区", trigger: "change" }
        ],
        hospitalId: [
          { required: true, message: "请选择预约医院", trigger: "change" }
        ],
        dept1: [
          { required: true, message: "请选择预约科室", trigger: "change" }
        ],
        enterHospitalState: [
          { required: true, message: "请选择住院状态", trigger: "change" }
        ],
        sheBaoState: [
          { required: true, message: "请选择社保状态", trigger: "change" }
        ]
      },
      liveHosMore: false,
      isCheckHos: true,
      types: [],
      codeTypes: [],
      codeTypes2: [],
      hosList: [],
      liveHosState: [],
      securityType: [],
      docList: [],
      defaultAddress: null,
      defaultAddress2: null,
      defaultAddress3: null,
      hospitalName: ""
    };
  },
  components: {
    UserAddress
  },
  created() {
    this.productList(); //派单类型
    this.getDict("1"); //一级科室
    this.getDict("2"); //二级科室
    this.getDict("12"); //住院状态
    this.getDict("13"); //社保状态
    if (this.$route.query.mainId) {
      this.getDetail();
    }
  },
  methods: {
    productList() {
      const params = {
        page: 0,
        size: 1000
      };
      this.axios
        .get("/product?" + queryString.stringify(params))
        .then(res => {
          const code = Number(res.data.code);
          if (code === 200) {
            this.types = res.data.data;
          } else {
            this.$message(this.mes.busy);
          }
        })
        .catch(err => {
          console.log(err);
          this.$message(this.mes.busy);
        });
    },
    getDict(id) {
      this.axios
        .get("/dict?groupId=" + id)
        .then(res => {
          if (res.data.code == 200) {
            if (id == "12") {
              this.liveHosState = res.data.data;
            } else if (id == "13") {
              this.securityType = res.data.data;
            } else if (id == "1") {
              this.codeTypes = res.data.data;
            } 
          } else {
            this.$message(this.mes.busy);
          }
        })
        .catch(err => {
          console.log(err);
          this.$message(this.mes.busy);
        });
    },
    cancle() {
      this.$router.back(-1);
    },
    creatHos() {
      let routeData = this.$router.resolve({
        path: "/hosNetwork/hospitalAdd?type=add"
      });
      window.open(routeData.href, "_blank");
    },
    enterStage() {
      if (this.ruleForm.enterHospitalState != "2") {
        this.liveHosMore = true;
      } else {
        this.liveHosMore = false;
      }
    },
    refArea() {
      let addressParams = this.$refs.AddAddress.getData();
      this.ruleForm.province = addressParams.province;
      this.ruleForm.city = addressParams.city;
      this.ruleForm.country = addressParams.country;
    },
    getHospital() {
      let addressParams2 = this.$refs.AddAddress2.getData();
      this.ruleForm.wantProvince = addressParams2.province;
      this.ruleForm.wantCity = addressParams2.city;
      this.ruleForm.wantCountry = addressParams2.country;
      const params = {
        level: "",
        name: "",
        checkProvince: "",
        province: this.ruleForm.wantProvince,
        city: this.ruleForm.wantCity,
        country: this.ruleForm.wantCountry,
        page: 0,
        size: 1000
      };
      this.axios
        .get("/hospital?" + queryString.stringify(params))
        .then(res => {
          if (res.data.code === 200) {
            this.hosList = res.data.data.list;
            if (res.data.data.list.length > 0) {
              this.isCheckHos = false;
            } else {
              this.isCheckHos = true;
              this.$message("该期望就诊地没有医院，请重新选择");
            }
          } else {
            this.$message(this.mes.busy);
          }
        })
        .catch(err => {
          console.log(err);
          this.$message(this.mes.busy);
        });
    },
    getHosName(val) {
      console.log(val);
      for (var i = 0; i < this.hosList.length; i++) {
        if (val == this.hosList[i].id) {
          this.hospitalName = this.hosList[i].name;
        }
      }
      this.chooseDoc();
    },
    chooseDoc() {
      const params = {
        hospitalName: this.hospitalName,
        dept1: this.ruleForm.dept1,
        dept2: this.ruleForm.dept2,
        page: 0,
        size: 1000
      };
      this.axios
        .get("/doctor?" + queryString.stringify(params))
        .then(res => {
          if (res.data.code === 200) {
            this.docList = res.data.data.list;
          } else {
            this.$message(this.mes.busy);
          }
        })
        .catch(err => {
          console.log(err);
          this.$message(this.mes.busy);
        });
    },
    changeDep(){
      this.ruleForm.dept2="";
      var parentKey=this.ruleForm.dept1;
      this.axios
        .get("/dict?groupId=2&parentKey=" + parentKey)
        .then(res => {
          if (res.data.code == 200) {
            this.codeTypes2 = res.data.data;
          } else {
            this.$message(this.mes.busy);
          }
        })
        .catch(err => {
          console.log(err);
          this.$message(this.mes.busy);
        });
    },
    getDetail() {
      this.api
        .get(`/productOrder/${this.$route.query.mainId}`)
        .then(res => {
          if (res.code == 200) {
            this.ruleForm = res.data.template;
            this.defaultAddress = {
              province: this.ruleForm.province,
              city: this.ruleForm.city,
              country: this.ruleForm.country
            };
            this.defaultAddress2 = {
              province: this.ruleForm.wantProvince,
              city: this.ruleForm.wantCity,
              country: this.ruleForm.wantCountry
            };
            this.defaultAddress3 = {
              province: this.ruleForm.sheBaoProvince,
              city: this.ruleForm.sheBaoCity,
              country: this.ruleForm.sheBaoCountry
            };
            this.ruleForm.productId = res.data.productId;
            this.ruleForm.sickType = JSON.stringify(this.ruleForm.sickType);
            this.ruleForm.enterHospitalState = JSON.stringify(
              this.ruleForm.enterHospitalState
            );
            this.ruleForm.sheBaoPay = JSON.stringify(this.ruleForm.sheBaoPay);
            this.ruleForm.nongHeSign = JSON.stringify(this.ruleForm.nongHeSign);
            this.getHosName();
            this.enterStage();
          }
        })
        .catch(err => {
          console.log(err);
        });
    },
    submitForm(formName) {
      let addressParams = this.$refs.AddAddress.getData();
      let addressParams2 = this.$refs.AddAddress2.getData();
      let addressParams3 = this.$refs.AddAddress3.getData();
      this.ruleForm.province = addressParams.province;
      this.ruleForm.city = addressParams.city;
      this.ruleForm.country = addressParams.country;
      this.ruleForm.wantProvince = addressParams2.province;
      this.ruleForm.wantCity = addressParams2.city;
      this.ruleForm.wantCountry = addressParams2.country;
      this.ruleForm.sheBaoProvince = addressParams3.province;
      this.ruleForm.sheBaoCity = addressParams3.city;
      this.ruleForm.sheBaoCountry = addressParams3.country;
      this.$refs[formName].validate(valid => {
        if (valid) {
          let form = {
            id: this.$route.query.mainId,
            orderId: this.$route.query.id,
            productId: this.ruleForm.productId,
            template: {
              productId: this.ruleForm.productId,
              bookMobile: this.ruleForm.bookMobile,
              sickType: this.ruleForm.sickType,
              sickName: this.ruleForm.sickName,
              province: this.ruleForm.province,
              city: this.ruleForm.city,
              country: this.ruleForm.country,
              wantProvince: this.ruleForm.wantProvince,
              wantCity: this.ruleForm.wantCity,
              wantCountry: this.ruleForm.wantCountry,
              sheBaoProvince: this.ruleForm.sheBaoProvince,
              sheBaoCity: this.ruleForm.sheBaoCity,
              sheBaoCountry: this.ruleForm.sheBaoCountry,
              hospitalId: this.ruleForm.hospitalId,
              dept1: this.ruleForm.dept1,
              dept2: this.ruleForm.dept2,
              doctorId: this.ruleForm.doctorId,
              enterHospitalState: this.ruleForm.enterHospitalState,
              enterHospitalTime: this.ruleForm.enterHospitalTime,
              payMoney: this.ruleForm.payMoney,
              needMoney: this.ruleForm.needMoney,
              sheBaoState: this.ruleForm.sheBaoState,
              sheBaoPay: this.ruleForm.sheBaoPay,
              nongHeSign: this.ruleForm.nongHeSign,
              remark: this.ruleForm.remark
            },
            templateId: this.ruleForm.id
          };
          this.api
            .post("/productOrder", form)
            .then(res => {
              if (res.data.code == 200) {
                //this.$router.push("userDisPath?id=" + res.data.data.id);
                this.$router.push({
                  path: "userDisPath",
                  query: {
                    mainId: res.data.data.id,
                    type: this.$route.query.type,
                    id: this.$route.query.id,
                    cardNum: this.$route.query.cardNum,
                    mobile: this.$route.query.mobile,
                    userName: this.$route.query.userName
                  }
                });
              }
            })
            .catch(res => {
              console.log(res);
            });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    }
  }
};
</script>
 
<style lang="less" scoped>
.userDisPath {
  margin-top: 20px;
  .el-select {
    margin-right: 20px;
    width: 220px;
  }
  .el-input {
    width: 220px;
    margin-right: 20px;
  }
}
</style>
 